<template>
    <view class="tabbar" @mousedown="mousedown">
        <view class="tabbar-box">
            <view class="tabbar-top">
                <view class="logo-img">
                    <image
                        :src="headImgUrl"
                        mode="aspectFill"
                        @error="onImgError"
                    ></image>
                </view>
                <div class="box-type comm-list" id="box-type-box">
                    <!-- 产品 -->
                    <view class="type-txt">{{ saleTxt }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabBarList"
                        @mouseover="onMouseover($event, item)"
                        @mouseout="onMouseOut($event, item)"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view>
                    <!-- 采购 -->
                    <view class="type-txt type-txt-t10" v-if="purchLimit">{{
                        purchcaseTxt
                    }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabBarPuschList"
                        @mouseover="onMouseover($event, item)"
                        @mouseout="onMouseOut($event, item)"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view>
                    <!-- 预约 -->
                    <view class="type-txt type-txt-t10" v-if="aboutLimit">{{
                        aboutTxt
                    }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabBarAboutList"
                        @mouseover="onMouseover($event, item)"
                        @mouseout="onMouseOut($event, item)"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view>

                    <!-- 报表 -->
                    <view class="type-txt type-txt-t10" v-if="repLimit">{{
                        repTxt
                    }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabBarReportList"
                        @mouseover="onMouseover($event, item)"
                        @mouseout="onMouseOut($event, item)"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view>
                    <!-- 营销 -->
                    <view class="type-txt type-txt-t10" v-if="marketingLimit">{{
                        marketingTxt
                    }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabMarketingList"
                        @mouseover="onMouseover($event, item)"
                        @mouseout="onMouseOut($event, item)"
                        :key="item.id"
                        @click="goPath(item)"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view>
                </div>
            </view>
            <!-- 设置 -->
            <view class="tabber-set">
                <view
                    class="item"
                    v-for="(item, index) in tabBarBtmList"
                    @mouseover="onMouseover($event, item)"
                    @mouseout="onMouseOut($event, item)"
                    :key="index"
                    @click="openSetWin(item)"
                >
                    <view class="i-icon">
                        <image :src="item.iconPath"></image>
                    </view>
                </view>
            </view>
        </view>
        <!-- <tipTxt ref="tipTxt"></tipTxt> -->
    </view>
</template>

<script>
import cmd from "../js/Cmd.js";
import staticConst from "@/js/const/StaticConst.js";
import DEFAULT_IMG from "@/static/images/Uimg.png";
import goPage from "../js/GoPage.js";
import localStore from "../js/LocalStore.js";

import accessCtrl from "../js/limit/AccessCtrl.js";
import lang from "../js/conf/Lang.js";

import tipTxt from "./comm/TipTxt.vue";

import config from "../js/conf/Config.js";

export default {
    components: {
        tipTxt,
    },
    data() {
        return {
            tabBarBtmList: [
                {
                    type: "sz",
                    id: 1,
                    title: "设置",
                    icon: "icon-shezhi",
                    iconOnPath: "/static/images/menuOn05.png",
                    iconPath: "/static/images/menu05.png",
                    path: "/pages/index/index",
                },
            ],
            defaultImg: DEFAULT_IMG,
            tabBarList: [],
            info: {},
            headImgUrl: "",
            setTout: false,
            saleTxt: lang.saleTxt,
            purchcaseTxt: lang.purchcaseTxt,
            aboutTxt: lang.aboutSTxt,
            marketingTxt: lang.marketingTxt,
            tabBarPuschList: [],
            purchLimit: false,
            aboutLimit: false,
            marketingLimit: false,
            repLimit: false,
            repTxt: lang.repTxt,
            tabBarReportList: [],
            tabBarAboutList: [],
            tabMarketingList: [],
        };
    },
    props: {
        tabIndex: {
            type: Number,
            required: true,
        },
    },

    async mounted() {
        this.purchLimit = await accessCtrl.getPurchLimit();
        this.repLimit = await accessCtrl.getLimitReprot();
        this.aboutLimit = await accessCtrl.getAboutLimit();
        this.marketingLimit = await accessCtrl.getMarketingLimit();
        this.setTabSollFun();

        console.log("选择的id", this.tabIndex);
    },

    created() {
        // 初始化调用一次
        this.loadUinfoData();
    },
    methods: {
        setTabSollFun() {
            const arr = [8, 9, 10, 17, 19, 20];
            if (arr.indexOf(this.tabIndex) > -1) {
                setTimeout(() => {
                    document.querySelectorAll(
                        "#box-type-box"
                    )[0].scrollTop = 220;
                }, 300);
            }
        },
        actHandler(id) {
            let len = this.tabBarList.length;
            let item = null;
            for (let i = 0; i < len; i++) {
                let temp = this.tabBarList[i];
                if (temp.id == id) {
                    item = temp;
                    break;
                }
            }
            if (item) this.goPath(item);
        },

        /***采购***/
        actHandler1(id) {
            let len = this.tabBarPuschList.length;
            let item = null;
            for (let i = 0; i < len; i++) {
                let temp = this.tabBarPuschList[i];
                if (temp.id == id) {
                    item = temp;
                    break;
                }
            }
            if (item) this.goPath(item);
        },

        onImgError() {
            this.headImgUrl = this.defaultImg;
        },

        onMouseover(event, item) {
            let data = {};
            data.title = item.title;
            data.top = event.pageY + 20;
            if (item.type == "sz") {
                data.top = event.pageY - 40;
            }
            if (data.title.length == 2) {
                data.left = 16;
                data.width = 30;
            } else if (data.title.length == 3) {
                data.left = 12;
                data.width = 37;
            } else if (data.title.length == 4) {
                data.left = 6;
                data.width = 50;
            }
            data.display = "";
            this.$refs.tipTxt.showTip(data);
        },

        onMouseOut(item) {
            let data = {};
            data.display = "none";
            this.$refs.tipTxt.showTip(data);
        },

        async loadUinfoData() {
            this.info = await localStore.getUserInfo();
            if (this.info && this.info.avatar)
                this.headImgUrl = this.info.avatar;
            else this.headImgUrl = this.defaultImg;
            this.tabBarList = [
                {
                    id: staticConst.MD_GD,
                    title: lang.goodsTxt.titleTxt, //"产品",
                    iconOnPath: "/static/images/menuOn01.png",
                    iconPath: "/static/images/menu01.png",
                    path: "/pages/goods/index",
                    access:
                        (await accessCtrl.getSaleLimit()) &&
                        (await accessCtrl.getGoodsLimit()),
                },
                {
                    id: staticConst.MD_KH,
                    title: lang.customerTxt.titleTxt, //"客户",
                    iconOnPath: "/static/images/menuOn02.png",
                    iconPath: "/static/images/menu02.png",
                    path: "/pages/customer/index",
                    access: await accessCtrl.getLimitSeeCustomer(),
                },
                {
                    type: "xs",
                    id: staticConst.MD_KD,
                    title: lang.receiptTxt.titleTxt,
                    iconOnPath: "/static/images/menuOn03.png",
                    iconPath: "/static/images/menu03.png",
                    path: "/pages/receipt/index",
                    access:
                        (await accessCtrl.getSaleLimit()) &&
                        (await accessCtrl.getBillLimit()),
                },
                {
                    id: staticConst.MD_DJ,
                    title: lang.billTxt.titleTxt,
                    iconOnPath: "/static/images/menuOn04.png",
                    iconPath: "/static/images/menu04.png",
                    path: "/pages/saleBills/index",
                    access: await accessCtrl.getSaleLimit(),
                },
            ];

            this.tabBarPuschList = [
                {
                    id: staticConst.CG_KC,
                    title: lang.stockTxt.titleTxt, //"库存",
                    iconOnPath: "/static/images/c02On.png",
                    iconPath: "/static/images/c02.png",
                    path: "/pages/stock/index",
                    access: await accessCtrl.getPurchViewQtyEditLimit(),
                },
                {
                    id: staticConst.CG_GYS,
                    title: lang.supplierTxt.titleTxt, //"供应商",
                    iconOnPath: "/static/images/c01On.png",
                    iconPath: "/static/images/c01.png",
                    path: "/pages/supplier/index",
                    access: await accessCtrl.getPurchViewSupplierLimit(),
                },

                {
                    id: staticConst.CG_KD,
                    title: lang.purchase.titleTxt, //"采购开单",
                    iconOnPath: "/static/images/c03On.png",
                    iconPath: "/static/images/c03.png",
                    path: "/pages/purchase/index",
                    access:
                        (await accessCtrl.getPurchLimit()) &&
                        (await accessCtrl.getPurchWriteBillLimit()),
                },

                {
                    id: staticConst.CG_DJ, //采购单据
                    title: lang.billTxt.titleTxt,
                    iconOnPath: "/static/images/c04On.png",
                    iconPath: "/static/images/c04.png",
                    path: "/pages/purchBill/index",
                    access: await accessCtrl.getPurchLimit(),
                },
            ];

            this.tabBarAboutList = [
                {
                    id: staticConst.YY_XM,
                    title: "服务", //"服务",
                    iconOnPath: "/static/images/home_appointment_project_s.png",
                    iconPath: "/static/images/home_appointment_project_n.png",
                    path: "/pages/project/index",
                    access: await accessCtrl.getAboutLimit(),
                },
                {
                    id: staticConst.YY_GK,
                    title: "顾客", //"顾客",
                    iconOnPath:
                        "/static/images/home_appointment_customer_s.png",
                    iconPath: "/static/images/home_appointment_customer_n.png",
                    path: "/pages/projectCustomers/index",
                    access: await accessCtrl.getViewOtherCustomerLimit(),
                },
                {
                    id: staticConst.YY_YY,
                    title: "预约", //预约
                    iconOnPath: "/static/images/home_appointment_appoint_s.png",
                    iconPath: "/static/images/home_appointment_appoint_n.png",
                    path: "/pages/appointment/index",
                    access: await accessCtrl.getyyBillLimit(),
                },
                {
                    id: staticConst.YY_DJ,
                    title: "单据", //单据
                    iconOnPath: "/static/images/home_appointment_order_s.png",
                    iconPath: "/static/images/home_appointment_order_n.png",
                    path: "/pages/projectOrder/index",
                    access: await accessCtrl.getViewOtherSaleLimit(),
                },
            ];
            this.tabMarketingList = [
                {
                    id: staticConst.YX_PT,
                    title: "拼团优惠", //拼团优惠
                    iconOnPath: "/static/images/home_appointment_project_s.png",
                    iconPath: "/static/images/home_appointment_project_n.png",
                    path: "/pages/marketing-dough/index",
                    access: await accessCtrl.getSgortDoughLimit(),
                },
            ];
            this.tabBarReportList = [
                {
                    id: staticConst.REP_XS,
                    title: lang.report.repSaleTxt, //"销售报表",
                    iconOnPath: "/static/images/sale_icon_active1.png",
                    iconPath: "/static/images/sale_icon1.png",
                    path: "/pages/report/saleReport",
                    access:
                        (await accessCtrl.getLimitReprot()) &&
                        (await accessCtrl.getLimitSaleReport()),
                },

                {
                    id: staticConst.REP_CG, //采购报表
                    title: lang.report.repPurchTxt,
                    iconOnPath: "/static/images/stock_icon_active1.png",
                    iconPath: "/static/images/stock_icon1.png",
                    path: "/pages/report/purchaseReport",
                    access:
                        (await accessCtrl.getLimitReprot()) &&
                        (await accessCtrl.getLimitPurchReport()),
                },

                {
                    id: staticConst.REP_YY,
                    title: lang.report.repYYTxt, //预约
                    iconOnPath: "/static/images/home_appointment_appoint_s.png",
                    iconPath: "/static/images/home_appointment_appoint_n.png",
                    path: "/pages/report/appointment",
                    access:
                        (await accessCtrl.getLimitReprot()) &&
                        (await accessCtrl.getLimitSubscribeReprot()),
                },

                {
                    id: staticConst.REP_TJ, //统计报表
                    title: lang.report.repStockTxt,
                    iconOnPath: "/static/images/ranking_icon_active1.png",
                    iconPath: "/static/images/ranking_icon1.png",
                    path: "/pages/report/statisticalReport",
                    access:
                        (await accessCtrl.getLimitReprot()) &&
                        (await accessCtrl.getLimitStockReport()),
                },
            ];
        },

        /****开单****/
        bill(type) {
            let item = {};
            if (type == 1) {
                item = this.tabBarList[2];
            } else {
                item = this.tabBarPuschList[2];
            }

            this.goPath(item);
        },

        /*****产品*****/
        goods() {
            let item = this.tabBarList[0];
            this.goPath(item);
        },

        goPath(item) {
            console.log("goPath():", item);
            if (this.tabIndex == item.id) return;
            goPage.goNavTo(item.path);
            // cmd.external(cmd.CMD_SHOW_MORE, false);
        },

        /***移动窗口***/
        mousedown() {
            cmd.external(cmd.CMD_MOVE);
        },

        /***打开/关闭设置菜单**/
        openSetWin(item) {
            console.log(item, "1");
            if (item.id == 1 || item.id == staticConst.YX_YX)
                this.$emit("openSetWin", item.id);
            if (item.id == 2) this.$emit("openVip", item);
        },

        /****添加新的客户****/
        addNewCustom() {
            let item = this.tabBarList[1];
            this.goPath(item);
        },
    },
};
</script>
<style lang="scss">
.tabbar {
    height: 100vh;
    width: 72px;
    position: fixed;
    .tabbar-box {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        justify-content: center;
        background: #292f4c; //3388FF//$uni-color-primary;
        // background: linear-gradient(120deg , rgba(177,62,240,.8) , rgba(112,81,248,.8));
        height: 100%;
        width: 72px;
        z-index: 999;
        .tabbar-top {
            margin-top: 20px;
            .logo-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box-type {
                height: calc(100vh - 140px);
                overflow: auto;
                margin-top: 10px;
                overflow-y: scroll;
                scrollbar-color: transparent transparent;
                scrollbar-track-color: transparent;
                -ms-scrollbar-track-color: transparent;
                &.comm-list {
                }
                .type-txt {
                    color: #6a6e82;
                    text-align: center;
                    padding-top: 0px;
                    font-size: 14px;
                    padding-left: 3px;
                }
                .type-txt-t10 {
                    padding-top: 0px;
                }
                .item {
                    margin-top: 4.5px;
                    text-align: center;
                    width: 32px;
                    height: 40px;
                    padding-left: 4px;
                    color: #fff; //rbga(255,255,255,1);
                    cursor: pointer;
                    position: relative;
                    .i-icon {
                        width: 32px;
                        height: 32px;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .i-icon:hover {
                        opacity: 0.8;
                    }
                }

                .active {
                    color: #3388ff;
                }

                .item:hover {
                    &.active {
                        color: #3388ff;
                    }
                    color: #3388ff;
                }
            }
        }
        .tabber-set {
            width: 100%;
            text-align: center;

            margin-bottom: 0px;
            color: #fff;
            cursor: pointer;
            // display: flex;
            flex-wrap: wrap;
            // align-content: space-between;
            align-items: center;
            justify-content: center;
            .item {
                margin-top: 20px;
                text-align: center;
                width: 32px;
                height: 50px;
                padding-left: 20px;
                color: #fff; //rbga(255,255,255,1);
                cursor: pointer;
                .i-icon {
                    width: 32px;
                    height: 32px;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .i-icon:hover {
                    opacity: 0.8;
                }
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.comm-list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0);
    scrollbar-arrow-color: red;
}
</style>